

<div class="layui-form" id="form" lay-filter="agent_edit" >
	<div class="form-cont">
		<div class="layui-form-item verify">
		  <label class="layui-form-label">代理用户名</label>
		  <div class="layui-input-block">
			  <input type="text" verify="requirel5" :disabled="type==1?false:true" autocomplete="off" v-model="detail.agent_name" placeholder="请输入代理用户名" class="layui-input">
			  <span class="hint">代理用户名必填</span>
			</div>
		</div>
		<div class="layui-form-item verify" v-if="type!=3">
		  <label class="layui-form-label">登录密码</label>
		  <div class="layui-input-block">
			  <input type="text" autocomplete="off" v-model="detail.pwd" :verify='type==1?"require|pass":"pass"' :placeholder="type==1?'请设置登录密码':'修改密码'" class="layui-input">
			  <span class="hint">登录密码必填</span>
			</div>
		</div>
		<div class="layui-form-item verify" v-if="type!=3">
		  <label class="layui-form-label">提现密码</label>
		  <div class="layui-input-block">
			  <input type="text" autocomplete="off" v-model="detail.withdraw_pwd" :verify='type==1?"require|pass":"pass"' :placeholder="type==1?'请设置提现密码':'修改密码'" class="layui-input">
			  <span class="hint">提现密码必填</span>
			</div>
		</div>
		<div class="layui-form-item verify" v-if="type!=3">
			<label class="layui-form-label">设备登录密码</label>
			<div class="layui-input-block">
				<input type="text" autocomplete="off" v-model="detail.device_pwd" :verify='type==1?"require|pass":"pass"' :placeholder="type==1?'请设置设备登录密码':'修改密码'" class="layui-input">
				<span class="hint">设备密码必填</span>
			</div>
		</div>

		<div class="layui-form-item verify">
		  <label class="layui-form-label">代理分组</label>
		  <div class="layui-input-block hxr-select" @click="choose">
			  <input type="text" verify="require" v-model="detail.agent_group_name" placeholder="请选择分组" class="layui-input" readonly>
			  <i class="layui-icon layui-icon-right"></i>
			  <span class="hint">代理分组必选</span>
			</div>
		</div>
		<div class="layui-form-item verify">
			<label class="layui-form-label">负责名称</label>
			<div class="layui-input-block">
				<input type="text" v-model="detail.hotel_name"  placeholder="请输入负责学校或酒店名称" class="layui-input">
			</div>
		</div>

		<div class="layui-form-item verify">
		  <label class="layui-form-label">姓名</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.real_name" verify="require|realname" placeholder="请输入真实姓名" class="layui-input">
			  <span class="hint">姓名必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">性别</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-select">
		      	<div class="layui-select-title"><input type="text" name='sex' :data='detail.sex' verify="require" placeholder="请选择性别" class="layui-input layui-unselect" readonly><i
		      		 class="layui-edge"></i></div>
		      	<dl class="layui-anim layui-anim-upbit">
		      		<dd class="layui-select-tips layui-this">请选择性别</dd>
		      		<dd data='0'>保密</dd>
						<dd data='1'>男</dd>
						<dd data='2'>女</dd>
		      	</dl>
		      </div>
			  <span class="hint">性别必选</span>
		  </div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">身份证号</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.card_id" verify="require|card" placeholder="请输入身份证号" class="layui-input">
			  <span class="hint">身份证号必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">身份证照片</label>
		  <div class="layui-input-block">
			  <button type="button" class="layui-btn" id="upload" v-show="!photo">
			    <i class="layui-icon">&#xe67c;</i>上传图片
			  </button>
			  <div class="flex img-box" v-if="photo">
				  <span @click="photo=''">x</span>
			  	<img :src="photo">
			  </div>
			  <input type="hidden" verify="require" v-model="photo"/>
			  <span class="hint" v-if="!photo">身份证照片必传</span>
		  </div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">电话</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.tel" verify="require|phone" placeholder="请输入电话" class="layui-input">
			  <span class="hint">电话必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
			<label class="layui-form-label" style="width: 85px;padding-left: 10px;">代理佣金比例(%)</label>
			<div class="layui-input-block">
				<input type="number"  autocomplete="off" v-model="detail.withdraw_proportion" placeholder="请输入佣金比例" class="layui-input">
				<span class="hint">代理佣金比例大于等于0小于100</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">所在区域</label>
		  <div class="layui-input-block">
			  <div class="flex">
			  	<div class="layui-unselect layui-form-select">
			  		<div class="layui-select-title"><input type="text" name='province' @click="sheng?'':cityF({})" :data='detail.province' verify="require" placeholder="请选择" class="layui-input layui-unselect" readonly><i
			  			 class="layui-edge"></i></div>
			  		<dl class="layui-anim layui-anim-upbit">
			  			<dd class="layui-select-tips layui-this">请选择</dd>
			  			<dd :data='x.city_id' v-for="x in sheng" @click="shengF(x)">{{x.city_name}}</dd>
			  		</dl>
			  	</div>
				<template v-if="detail.province!=710000&&detail.province!=810000&&detail.province!=820000">
					<div class="layui-unselect layui-form-select" style="margin: 0 10px;">
						<div class="layui-select-title"><input type="text" name='city' :data='detail.city' verify="require" placeholder="请选择" class="layui-input layui-unselect" readonly><i
							 class="layui-edge"></i></div>
						<dl class="layui-anim layui-anim-upbit">
							<dd class="layui-select-tips layui-this">请选择</dd>
							<dd :data='x.city_id' v-for="x in shi" @click="shiF(x)">{{x.city_name}}</dd>
						</dl>
					</div>
					<div class="layui-unselect layui-form-select">
						<div class="layui-select-title"><input type="text" name='county' :data='detail.county' verify="require" placeholder="请选择" class="layui-input layui-unselect" readonly><i
							 class="layui-edge"></i></div>
						<dl class="layui-anim layui-anim-upbit">
							<dd class="layui-select-tips layui-this">请选择</dd>
							<dd :data='x.city_id' v-for="x in qu" @click="detail.county=x.city_id">{{x.city_name}}</dd>
						</dl>
					</div>
				</template>
			  </div>
			  <span class="hint">所在区域必选</span>
		  </div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">住址</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.address" verify="require" placeholder="请输入住址" class="layui-input">
			  <span class="hint">住址必填</span>
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">邮箱</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.email" lay-verify="required" placeholder="请输入邮箱" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item verify">
		  <label class="layui-form-label">状态</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.status==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.status==1?'启用':'停用'}}</em><i></i></div>
		  </div>
		</div>
	</div>
	  <div class="form-btn" v-if="type!=3">
	      <input type="button" value="保存" class="layui-btn" @click="submit">
	  </div>
</div>
<style type="text/css">
	.img-box{
		width: 60px;
		height: 60px;
		border: 1px solid #eee;
		position: relative;
	}
	.img-box img{
		max-width: 100%;
		max-height: 100%;
	}
	.img-box span{
		position: absolute;
		width: 15px;
		line-height: 15px;
		text-align: center;
		font-family: arial;
		top: -8px;
		right: -8px;
		border-radius: 50%;
		background: rgba(0,0,0,.5);
		color:#fff;
		font-size: 12px;
		cursor: pointer;
	}
	.form-cont{
		overflow: auto;
	}
</style>
<script>
	layui.use(['form','upload','layer'], function(){
	  var $ = layui.$
	  ,form = layui.form,upload=layui.upload, layer = layui.layer;
	  form.verify(layui.admin.verify);
	  var forms=new Vue({
	  		el:'#form',
	  		data:{
	  			role:[],
				group:[],
				type:layui.admin.objData.type,
				detail:{
					status:1,
					sex:'',
					card_photo:'',
					agent_group_name:'',
					school_name:'',
					institute_name:''
				},
				photo:'',
				old_detail:{},
				role_name:'',
				sheng:'',
				shi:[],
				qu:[],
				upload:'',
				layer:'',
				photos:false
	  		},
	  		mounted() {
				var _this=this;
				//初始化
	  			if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail),this.photo=layui.conf.url+this.detail.card_photo;
				layui.admin.agent=this.detail;
				if(this.detail.city){
					this.cityF({pid:this.detail.province});
					if(this.detail.county){
						this.cityF({pid:this.detail.city},1);
					}
				}
				/* this.cityF({}); */
				if(this.detail.sex==1){
					this.sex='男';
				}else if(this.detail.sex==2){
					this.sex='女';
				}else if(this.detail.sex===0){
					this.sex='保密';
				}

				$('input[name="sex"]').val(this.sex);
				$('input[name="group_name"]').val(this.detail.agent_group_name);
				$('input[name="province"]').val(this.detail.province_name);
				$('input[name="city"]').val(this.detail.citys_name);
				$('input[name="county"]').val(this.detail.county_name);
				//身份证上传
			      this.upload=upload.render({
				    elem: '#upload' ,//绑定元素
					field:'image',
					accept:'images',
					data:{type:1},
					auto:false,
				    url: layui.conf.ajaxUrl+'login/upload_img'
					//,data:{module:'notice',folder:'/cat/logo'}
					,choose: function(obj){
					    obj.preview(function(index, file, result){
						  _this.photo=result;
						  _this.photos=true;
					    });
					  }
				    ,done: function(res){
					  _this.detail.card_photo=res.data.img_url;
					  layer.close(_this.layer);
					  _this.submits();
				    }
				    ,error: function(){}
				  });
	  		},
	  		methods:{
	  			radioF:function(){//radio选择
	  				this.detail.status==1?this.detail.status=2:this.detail.status=1;
	  			},
				choose:function(){
					layui.admin.pups=layer.open({
						type:1,
					   id:'pup-conts',
					   title: '选择代理分组',
					   btn:[],
					   area: ['800px','600px'],
					   success:	 function(layero, index){
						$('#pup-conts').load(layui.conf.views+'agent_group/agent_grouplist.html?v='+layui.cache.version);
					   }
					})
				},
				chooseX:function(){
					layui.admin.pups=layer.open({
						type:1,
					   id:'pup-conts',
					   title: '选择负责学校',
					   btn:[],
					   area: ['800px','600px'],
					   success:	 function(layero, index){
						$('#pup-conts').load(layui.conf.views+'record/schoolselect.html?v='+layui.cache.version);
					   }
					})
				},
				chooseXy:function(){
	  				if (!layui.admin.agent.school_id){
						var lay_index=layer.open({
							type: 1
							,offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
							,id: 'layerDemoauto' //防止重复弹出
							,content: '<div style="padding: 20px 100px;">请先选择学校</div>'
							,btn: '关闭'
							,btnAlign: 'c' //按钮居中
							,shade: 0 //不显示遮罩
							,yes: function(){
								layer.close(lay_index);
							}
						});
						return false;
					}
					layui.admin.pups=layer.open({
						type:1,
					   id:'pup-conts',
					   title: '选择负责院系',
					   btn:[],
					   area: ['800px','600px'],
					   success:	 function(layero, index){
						$('#pup-conts').load(layui.conf.views+'record/instituteselect.html?v='+layui.cache.version);
					   }
					})
				},
				submit:function(){
					if(layui.admin.form('#form')){
						if(this.photos){
							this.layer=layer.load(1);
							this.upload.upload();
						}else{
							this.submits();
						}
					}
				},
				submits:function(){
					this.detail.sex=parseInt($('input[name="sex"]').attr('data'));
					if(this.type==2){   //编辑
						var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'agent_id');

						if(data){
							layui.admin.formapi('agents/update',data);
						}
					}else{  //添加

						layui.admin.formapi('agents/add',this.detail);
					}
				},
				cityF:function(data,t){
					var _this=this;
					layui.admin.ajax('citys/list',data,1).then(function(res){
						if(data.pid){
							if(t){
								_this.qu=res.data;
							}else{
								_this.shi=res.data;
							}
						}else{
							_this.sheng=res.data;
						}
					}).catch(function(res){});
				},
				shengF:function(x){
					this.shi='';
					this.qu='';
					this.cityF({pid:x.city_id})
					this.detail.province=x.city_id;
					$('input[name="city"]').val('');
					$('input[name="county"]').val('');
				},
				shiF:function(x){
					this.qu='';
					this.cityF({pid:x.city_id},1)
					this.detail.city=x.city_id;
					$('input[name="county"]').val('');
				}
	  		}
	  	})
	});
</script>
